<!-- if cvcHeight not specified, render table without card height container & viewport target -->
<ng-container *ngIf="!cvcHeight; else setHeightCard">
  <!-- adjust nz-card's cvcAutoHeightCard to equalize padding around this table's container e.g. entity-home's nz-page-header components -->
  <nz-card
    [nzTitle]="titleTemplate"
    [nzExtra]="extraTemplate"
    nzSize="small"
    cvcAutoHeightCard
    cvcAutoHeightTarget="viewport">
    <ng-template [ngTemplateOutlet]="table"> </ng-template>
  </nz-card>
</ng-container>

<!-- if cvcHeight is specified, render table in container w/ specified height-->
<ng-template #setHeightCard>
  <div
    class="card-container"
    [ngStyle]="{ height: cvcHeight }">
    <nz-card
      [nzTitle]="titleTemplate"
      [nzExtra]="extraTemplate"
      cvcAutoHeightCard
      nzSize="small">
      <ng-template [ngTemplateOutlet]="table"> </ng-template>
    </nz-card>
  </div>
</ng-template>

<ng-template #table>
  <!-- nzVirtualItemSize can be determined by inspecting the row element in Dev tools, and noting the height calculated in its Styles tab. this probably shouldn't change much, if at all. -->
  <nz-table
    #virtualTable
    nzSize="small"
    [nzData]="(row$ | ngrxPush) || []"
    [nzLoading]="!(row$ | ngrxPush)"
    [cvcAutoHeightTable]="25"
    [nzVirtualItemSize]="29"
    cvcTableScroll
    (cvcTableScrollOnScroll)="scrollEvent$.next($event)"
    [cvcTableScrollQueryRef]="queryRef"
    [cvcTableScrollPageInfo]="pageInfo$ | ngrxPush"
    [cvcTableScrollToIndex]="(scrollIndex$ | ngrxPush)!"
    [nzVirtualForTrackBy]="trackByIndex"
    [nzScroll]="{ x: '680px', y: '800px' }"
    [nzFrontPagination]="false"
    [nzShowPagination]="false">
    <thead (nzSortOrderChange)="sortChange$.next($event)">
      <tr class="col-header-row">
        <th
          nzWidth="100px"
          nzLeft
          [nzColumnKey]="sortColumns.Id"
          [nzSortFn]="true"
          nz-tooltip
          nzTooltipTitle="Evidence ID">
          EID
        </th>
        <th
          *ngIf="displayMolecularProfile"
          nzWidth="320px"
          nz-tooltip
          nzTooltipTitle="Molecular Profile Name">
          Molecular Profile
        </th>
        <th
          nzWidth="250px"
          [nzColumnKey]="sortColumns.DiseaseName"
          [nzSortFn]="true">
          Disease
        </th>
        <th nzWidth="400px">Therapies</th>
        <th
          nzWidth="40px"
          nz-tooltip
          nzTooltipTitle="Therapy Interaction Type">
          IT
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.Description"
          nzAlign="center"
          [nzSortFn]="true"
          nz-tooltip
          nzTooltipTitle="Evidence Description">
          DESC
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.EvidenceLevel"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Evidence Level">
          EL
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.EvidenceType"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Evidence Type">
          ET
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.EvidenceDirection"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Evidence Direction">
          ED
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.Significance"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Significance">
          S
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.VariantOrigin"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Variant Origin">
          VO
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.EvidenceRating"
          [nzSortDirections]="['descend', 'ascend', null]"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Rating">
          R
        </th>
      </tr>
      <tr class="filter-row">
        <th nzLeft>
          <cvc-clearable-input-filter
            [(inputModel)]="eidInput"
            (inputModelChange)="
              filterChange$.next()
            "></cvc-clearable-input-filter>
        </th>
        <th *ngIf="displayMolecularProfile">
          <cvc-clearable-input-filter
            [(inputModel)]="molecularProfileNameInput"
            (inputModelChange)="
              filterChange$.next()
            "></cvc-clearable-input-filter>
        </th>
        <th>
          <cvc-clearable-input-filter
            [(inputModel)]="diseaseNameInput"
            (inputModelChange)="
              filterChange$.next()
            "></cvc-clearable-input-filter>
        </th>
        <th>
          <cvc-clearable-input-filter
            [(inputModel)]="therapyNameInput"
            (inputModelChange)="
              filterChange$.next()
            "></cvc-clearable-input-filter>
        </th>
        <th></th>
        <th
          nzAlign="center"
          nzRight>
          <cvc-clearable-input-filter
            [(inputModel)]="descriptionInput"
            (inputModelChange)="
              filterChange$.next()
            "></cvc-clearable-input-filter>
        </th>
        <th
          nzAlign="center"
          nzRight>
          <nz-select
            nzAllowClear
            nzPlaceHolder="All"
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            (ngModelChange)="filterChange$.next()"
            [(ngModel)]="evidenceLevelInput">
            <nz-option
              nzValue="A"
              [nzLabel]="
                'A - ' + (evidenceLevels.A | evidenceLevelDisplay)
              "></nz-option>
            <nz-option
              nzValue="B"
              [nzLabel]="
                'B - ' + (evidenceLevels.B | evidenceLevelDisplay)
              "></nz-option>
            <nz-option
              nzValue="C"
              [nzLabel]="
                'C - ' + (evidenceLevels.C | evidenceLevelDisplay)
              "></nz-option>
            <nz-option
              nzValue="D"
              [nzLabel]="
                'D - ' + (evidenceLevels.D | evidenceLevelDisplay)
              "></nz-option>
            <nz-option
              nzValue="E"
              [nzLabel]="
                'E - ' + (evidenceLevels.E | evidenceLevelDisplay)
              "></nz-option>
          </nz-select>
        </th>
        <th
          nzAlign="center"
          nzRight>
          <nz-select
            nzAllowClear
            nzPlaceHolder="All"
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            (ngModelChange)="filterChange$.next()"
            [(ngModel)]="evidenceTypeInput">
            <nz-option
              nzValue="PREDICTIVE"
              nzLabel="Predictive"></nz-option>
            <nz-option
              nzValue="PROGNOSTIC"
              nzLabel="Prognostic"></nz-option>
            <nz-option
              nzValue="DIAGNOSTIC"
              nzLabel="Diagnostic"></nz-option>
            <nz-option
              nzValue="PREDISPOSING"
              nzLabel="Predisposing"></nz-option>
            <nz-option
              nzValue="ONCOGENIC"
              nzLabel="Oncogenic"></nz-option>
            <nz-option
              nzValue="FUNCTIONAL"
              nzLabel="Functional"></nz-option>
          </nz-select>
        </th>
        <th
          nzAlign="center"
          nzRight>
          <nz-select
            nzAllowClear
            nzPlaceHolder="All"
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            [nzDropdownMatchSelectWidth]="false"
            (ngModelChange)="filterChange$.next()"
            [(ngModel)]="evidenceDirectionInput">
            <nz-option
              nzValue="SUPPORTS"
              nzLabel="Supports"></nz-option>
            <nz-option
              nzValue="DOES_NOT_SUPPORT"
              nzLabel="Does not Support"></nz-option>
            <nz-option
              nzValue="NA"
              nzLabel="N/A"></nz-option>
          </nz-select>
        </th>
        <th
          nzAlign="center"
          nzRight>
          <nz-select
            nzAllowClear
            nzPlaceHolder="All"
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            (ngModelChange)="filterChange$.next()"
            [(ngModel)]="SignificanceInput">
            <nz-option-group nzLabel="Predictive">
              <nz-option
                nzValue="SENSITIVITYRESPONSE"
                nzLabel="Sensitivity/Response"></nz-option>
              <nz-option
                nzValue="RESISTANCE"
                nzLabel="Resistance"></nz-option>
              <nz-option
                nzValue="ADVERSE_RESPONSE"
                nzLabel="Adverse Response"></nz-option>
              <nz-option
                nzValue="REDUCED SENSITIVITY"
                nzLabel="Reduced Sensitivity"></nz-option>
              <nz-option
                nzValue="NA"
                nzLabel="N/A"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Prognostic">
              <nz-option
                nzValue="BETTER_OUTCOME"
                nzLabel="Better Outcome"></nz-option>
              <nz-option
                nzValue="POOR_OUTCOME"
                nzLabel="Poor Outcome"></nz-option>
              <nz-option
                nzValue="NA"
                nzLabel="N/A"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Diagnostic">
              <nz-option
                nzValue="POSITIVE"
                nzLabel="Positive"></nz-option>
              <nz-option
                nzValue="NEGATIVE"
                nzLabel="Negative"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Predisposing">
              <nz-option
                nzValue="PREDISPOSITION"
                nzLabel="Predisposition"></nz-option>
              <nz-option
                nzValue="PROTECTIVENESS"
                nzLabel="Protectiveness"></nz-option>
              <nz-option
                nzValue="NA"
                nzLabel="N/A"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Oncogenic">
              <nz-option
                nzValue="ONCOGENICITY"
                nzLabel="Oncogenicity"></nz-option>
              <nz-option
                nzValue="PROTECTIVENESS"
                nzLabel="Protectiveness"></nz-option>
              <nz-option
                nzValue="NA"
                nzLabel="N/A"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Functional">
              <nz-option
                nzValue="GAIN_OF_FUNCTION"
                nzLabel="Gain of Function"></nz-option
              >,
              <nz-option
                nzValue="LOSS_OF_FUNCTION"
                nzLabel="Loss of Function"></nz-option
              >,
              <nz-option
                nzValue="UNALTERED_FUNCTION"
                nzLabel="Unaltered Function"></nz-option
              >,
              <nz-option
                nzValue="NEOMORPHIC"
                nzLabel="Neomorphic"></nz-option
              >,
              <nz-option
                nzValue="DOMINANT_NEGATIVE"
                nzLabel="Dominant Negative"></nz-option
              >,
              <nz-option
                nzValue="UNKNOWN"
                nzLabel="Unknown"></nz-option>
            </nz-option-group>
          </nz-select>
        </th>
        <th
          nzAlign="center"
          nzRight>
          <nz-select
            nzAllowClear
            nzPlaceHolder="All"
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            (ngModelChange)="filterChange$.next()"
            [(ngModel)]="variantOriginInput">
            <nz-option
              nzValue="SOMATIC"
              nzLabel="Somatic"></nz-option>
            <nz-option
              nzValue="RARE_GERMLINE"
              nzLabel="Rare Germline"></nz-option>
            <nz-option
              nzValue="COMMON_GERMLINE"
              nzLabel="Common Germline"></nz-option>
            <nz-option
              nzValue="GERMLINE_OR_SOMATIC"
              nzLabel="Germline or Somatic"></nz-option>
            <nz-option
              nzValue="COMBINED"
              nzLabel="Combined"></nz-option>
            <nz-option
              nzValue="UNKNOWN"
              nzLabel="Unknown"></nz-option>
            <nz-option
              nzValue="NA"
              nzLabel="N/A"></nz-option>
          </nz-select>
        </th>
        <th
          nzAlign="center"
          nzRight>
          <nz-select
            nzAllowClear
            nzPlaceHolder="All"
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            (ngModelChange)="filterChange$.next()"
            [(ngModel)]="evidenceRatingInput">
            <nz-option
              [nzValue]="1"
              nzLabel="1"></nz-option>
            <nz-option
              [nzValue]="2"
              nzLabel="2"></nz-option>
            <nz-option
              [nzValue]="3"
              nzLabel="3"></nz-option>
            <nz-option
              [nzValue]="4"
              nzLabel="4"></nz-option>
            <nz-option
              [nzValue]="5"
              nzLabel="5"></nz-option>
          </nz-select>
        </th>
      </tr>
    </thead>
    <tbody>
      <ng-template
        nz-virtual-scroll
        let-eid
        let-index="index">
        <tr class="data-row">
          <td nzLeft>
            <cvc-evidence-tag
              [evidence]="eid"
              [enablePopover]="!isScrolling"
              popoverPlacement="right"></cvc-evidence-tag>
          </td>
          <td *ngIf="displayMolecularProfile">
            <cvc-molecular-profile-tag
              [molecularProfile]="eid.molecularProfile"
              [enablePopover]="!isScrolling"
              [truncateLongName]="40"></cvc-molecular-profile-tag>
          </td>
          <td>
            <ng-container *ngIf="eid.disease; else diseaseElse">
              <cvc-disease-tag
                [disease]="eid.disease"
                [enablePopover]="!isScrolling"
                [truncateLongName]="true"></cvc-disease-tag>
            </ng-container>
            <ng-template #diseaseElse>
              <i>N/A</i>
            </ng-template>
          </td>
          <td>
            <div *ngIf="eid.therapies.length > 0; else therapiesElse">
              <cvc-tag-list>
                <ng-container *ngFor="let therapy of eid.therapies">
                  <cvc-therapy-tag
                    [therapy]="therapy"
                    [enablePopover]="!isScrolling"
                    [truncateLongName]="true"></cvc-therapy-tag>
                </ng-container>
              </cvc-tag-list>
            </div>
            <ng-template #therapiesElse>
              <i
                nz-typography
                nzType="secondary"
                >N/A</i
              >
            </ng-template>
          </td>
          <td>
            <ng-container *ngIf="eid.therapyInteractionType">
              <nz-tag
                nz-tooltip
                nzTooltipPlacement="top"
                [nzTooltipTitle]="
                  !isScrolling
                    ? (eid.therapyInteractionType
                      | therapyInteractionEnumDisplay)
                    : ''
                ">
                <i
                  nz-icon
                  [nzType]="
                    eid.therapyInteractionType
                      | therapyInteractionEnumDisplay: 'icon-name'
                  "
                  class="attribute-icon"></i>
              </nz-tag>
            </ng-container>
            <ng-container *ngIf="!eid.therapyInteractionType">
              <i
                nz-typography
                nzType="secondary"
                >N/A</i
              >
            </ng-container>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="!isScrolling ? eid.description : ''">
              <i
                nz-icon
                nzType="align-left"></i>
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nz-placement="top"
              [nzTooltipTitle]="
                !isScrolling
                  ? eid.evidenceLevel +
                    ' - ' +
                    (eid.evidenceLevel | evidenceLevelDisplay)
                  : ''
              ">
              {{ eid.evidenceLevel }}
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling ? (eid.evidenceType | evidenceEnumDisplay) : ''
              ">
              <i
                nz-icon
                [nzType]="eid.evidenceType | evidenceEnumDisplay: 'icon-name'"
                class="attribute-icon"></i>
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling
                  ? (eid.evidenceDirection | evidenceEnumDisplay)
                  : ''
              ">
              <i
                nz-icon
                [nzType]="
                  eid.evidenceDirection | evidenceEnumDisplay: 'icon-name'
                "
                class="attribute-icon"></i>
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling ? (eid.significance | evidenceEnumDisplay) : ''
              ">
              <i
                nz-icon
                [nzType]="eid.significance | evidenceEnumDisplay: 'icon-name'"
                class="attribute-icon"></i>
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling ? (eid.variantOrigin | evidenceEnumDisplay) : ''
              ">
              <i
                nz-icon
                [nzType]="eid.variantOrigin | evidenceEnumDisplay: 'icon-name'"
                class="attribute-icon"></i>
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling ? eid.evidenceRating + ' stars' : ''
              ">
              {{ eid.evidenceRating }}
              <i
                nz-icon
                nzType="star"
                nzTheme="fill"
                class="attribute-icon"></i>
            </nz-tag>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
</ng-template>

<!-- card's title template -->
<ng-template #titleTemplate>
  <ng-container *ngIf="cvcTitleTemplate">
    <ng-template [ngTemplateOutlet]="cvcTitleTemplate"></ng-template>
  </ng-container>
  <ng-container *ngIf="cvcTitle">
    {{ cvcTitle }}
  </ng-container>

  <span class="table-info">
    <cvc-table-counts
      [cvcTableCountsConnection]="connection$"></cvc-table-counts>
  </span>
</ng-template>

<!-- card's extra template -->
<ng-template #extraTemplate>
  <nz-tag
    *ngIf="moreLoading$ | ngrxPush"
    nzColor="processing">
    <i
      nz-icon
      nzType="sync"
      nzSpin></i>
    <span>Loading…</span>
  </nz-tag>
  <cvc-no-more-rows [cvcShowTag]="noMoreRows$ | ngrxPush"></cvc-no-more-rows>
  <nz-filter-trigger
    [(nzVisible)]="statusFilterVisible"
    [nzDropdownMenu]="statusFilterMenu">
    <span
      nz-icon
      nzType="filter"
      nzTheme="fill"></span>
  </nz-filter-trigger>
</ng-template>

<nz-dropdown-menu #statusFilterMenu>
  <nz-card>
    <nz-row>
      <nz-radio-group
        [(ngModel)]="statusInput"
        (ngModelChange)="statusChanged()">
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.NonRejected"
          >Non-Rejected</label
        >
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.Accepted"
          >Accepted</label
        >
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.Submitted"
          >Submitted</label
        >
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.Rejected"
          >Rejected</label
        >
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.All"
          >All</label
        >
      </nz-radio-group>
    </nz-row>
    @if (this.organizationId) {
      <nz-row>
        <nz-col nzSpan="2">
          <label
            nz-checkbox
            [(ngModel)]="includeSubgroups"
            (ngModelChange)="includeSubgroupsChanged()"></label>
        </nz-col>
        <nz-col nzSpan="22">
          <span>Include evidence submitted by child organizations</span>
        </nz-col>
      </nz-row>
    }
  </nz-card>
</nz-dropdown-menu>
